/* eslint-disable max-len */
import { Button, Dialog, Grid, Search } from '@alifd/next';
import { Observer } from 'mobx-react-lite';
import React, { useState } from 'react';
import DataForm from './DataForm';
import { useStore } from '@/hooks';

const { Row, Col } = Grid;

const ActionPanel = ({ dictId, onBackClick }) => {
  const { dictItemStore: store } = useStore();
  const [adding, setAdding] = useState(false);
  const onSearch = () => {
    store.fetch(dictId);
  };

  return (
    <Row>
      <Col span={16}>
        <Button.Group>
          {/* <Button type="normal" onClick={onBackClick} style={{ marginLeft: '-10px', border: 0 }}>
            <Icon type="arrow-left" style={{ padding: 6, border: '1px solid #ccc', borderRadius: '50%', color: 'var(--btn-pure-primary-bg)' }} />
          </Button> */}
          <Button type="primary" onClick={() => setAdding(true)} >{i18n.t('添加字典项')}</Button>
        </Button.Group>
      </Col>
      <Col span={8} style={{ textAlign: 'right' }}>
        <Observer>{() => <Search shape="simple" type="normal" value={store.keyword} onChange={(t) => store.setKeyword(dictId, t)} onSearch={onSearch} />}</Observer>
      </Col>
      <Dialog className="tau-ui-dialog" title={i18n.t('添加字典项')} onClose={() => setAdding(false)} visible={adding} footer={false}>
        <DataForm dictId={dictId} onSubmit={() => setAdding(false)} onCancel={() => setAdding(false)} />
      </Dialog>
    </Row>
  );
};

export default ActionPanel;
